<template>
    <!-- 首页-最新消息 -->
    <div class="NewestMessage">
        <div class="title">
            <span>最新消息</span>
            <i class="el-icon-arrow-right"></i>
        </div>
        <div class="msgBox">
            <el-tabs v-model="activeTab" @tab-click="handleClick">
                <el-tab-pane v-for="item in msgData" :key="item.typeCode" :name="item.typeCode">
                    <span slot="label">
                        <el-badge :value="item.num" class="item">
                            <span>{{ item.msgType }}</span>
                        </el-badge>
                    </span>
                    <el-collapse v-model="activeCollapse" accordion>
                        <el-collapse-item title="梦美马科技小安退回了差旅审批单" name="1">
                            <div class="labelText">部门名称：工程公司</div>
                            <div class="labelText">出差开始时间：2023-06-15 15:50</div>
                            <div class="labelText">返回时间：2023-06-15 15:55</div>
                        </el-collapse-item>
                        <el-collapse-item title="梦美马科技小安退回了请假审批单" name="2">
                            <div class="labelText">部门名称：工程公司</div>
                            <div class="labelText">出差开始时间：2023-06-15 15:50</div>
                            <div class="labelText">返回时间：2023-06-15 15:55</div>
                        </el-collapse-item>
                        <el-collapse-item title="梦美马科技小安退回了外出审批单" name="3">
                            <div class="labelText">部门名称：工程公司</div>
                            <div class="labelText">出差开始时间：2023-06-15 15:50</div>
                            <div class="labelText">返回时间：2023-06-15 15:55</div>
                        </el-collapse-item>
                        <el-collapse-item title="梦美马科技小安退回了加班审批单" name="4">
                            <div class="labelText">部门名称：工程公司</div>
                            <div class="labelText">出差开始时间：2023-06-15 15:50</div>
                            <div class="labelText">返回时间：2023-06-15 15:55</div>
                        </el-collapse-item>
                    </el-collapse>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
export default {
    name: "NewestMessage",
    data() {
        return {
            activeTab: "1",
            msgData: [
                {typeCode: "1", msgType: '流程办结', num: 6},
                {typeCode: "2", msgType: '流程驳回/重报', num: 36},
                {typeCode: "3", msgType: '流程抄送', num: 17},
                {typeCode: "4", msgType: '评论', num: 23},
                {typeCode: "5", msgType: '提醒', num: 5},
                {typeCode: "6", msgType: '工单', num: 3},
            ],
            activeCollapse: "1"
        }
    },
    methods: {
        handleClick(tab){
            this.activeTab = tab.name
        }
    },
}
</script>

<style scoped lang="scss">
.NewestMessage{
    flex: 1;
    .title{
        cursor: pointer;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        span{
            font-size: 16px;
            color: #333333;
            font-weight: 700;
            line-height: 1;
        }
        i{
            font-size: 18px;
            color: #7A7B7C;
        }
    }
    .msgBox{
        width: 100%;
        height: 436px;
        padding: 18px;
        box-sizing: border-box;
        border-radius: 5px;
        border: 1px solid #ececec;
        background-color: #ffffff;
        >>>.el-tabs{
            .el-tabs__nav-wrap{
                &::after{
                    display: none;
                }
                .el-badge{
                    span{
                        font-size: 16px;
                        color: #7a7b7c;
                    }
                    .el-badge__content{
                        background-color: #f51247;
                        border: none;
                    }
                    .is-fixed{
                        top: 8px;
                        right: 0;
                    }
                }
            }
        }
        >>>.el-collapse-item{
            padding-left: 10px;
            .el-collapse-item__header{
                font-size: 16px;
                color: #7d7d7d;
                background-color: transparent !important;
            }
            .el-collapse-item__content{
                font-size: 14px;
                color: #abacb2;
                padding-bottom: 0;
                .labelText{
                    margin-bottom: 10px;
                }
            }
        }
    }
}
</style>
